<template>
  <view>
    <u-navbar title="课程签到记录" auto-back fixed placeholder right-icon="plus" @rightClick="show = true"></u-navbar>
    <view class="content">
      <z-paging ref="paging" fixed use-safe-area-placeholder refresher-vibrate refresher-only
			@query="onRefresh" safe-area-inset-bottom show-refresher-when-reload show-refresher-update-time
			style="top: calc(44px + var(--status-bar-height));">
        <u-gap height="20px"></u-gap>
        <u-list v-if="dataList.length != 0">
          <u-list-item v-for="item in dataList" :key="item.id">
            <u-cell :title="item.name" :value="item.status" is-link @click="goDetail(item)">
              <view slot="label" style="color: #999;font-size: 12px;">
                <text>{{ `总人数：${item.total}` }}</text>
                <text style="margin-left: 10px;">{{ `已签：${item.sign}` }}</text>
              </view>
            </u-cell>
          </u-list-item>
        </u-list>
        <u-empty v-else icon="/static/sign_data.png" text="暂无签到记录"></u-empty>
      </z-paging>
    </view>

    <u-popup :show="show" closeable mode="bottom" round="14" @close="show = false"> 
      <AddSign @reload="onRefresh(1, 20)" :id="id" @close="show = false; getDataList(true)" />
    </u-popup>
  </view>
</template>

<script>
import mixin from '@/mixin'
import {
  getSignList
} from '@/api/subject'
import AddSign from './add.vue'
export default {
  components: {
    AddSign
  },
  data() {
    return {
      id: '',
      show: false,
    }
  },
  mixins: [mixin],
  methods: {
    getDataList(isRefresh) {
      const params = {}
      params.current = this.current
      params.size = 20
      params.id = this.id
      getSignList(params).then(res => {
        if(res.code === 200) {
          this.total = res.data.total
          if(isRefresh) {
            this.dataList = []
          }
          res.data.list.forEach(item => {
            const curdate = new Date()
            if(new Date(item.end_time).getTime() < curdate.getTime()) {
              item.status = '已结束'
            }else {
              item.status = '进行中'
            }
            this.dataList.push(item)
          })
        }
        this.$refs.paging.complete()
      }).catch(e => {
        this.$refs.paging.complete()
      })
    },
    goDetail(item) {
      uni.navigateTo({
        url: `/teacher/sign/detail?item=${JSON.stringify(item)}`
      })
    }
  },
  onLoad(options) {
    this.id = options.id
    this.getDataList(true)
    uni.$on('close', e => {
      this.getDataList(true)
      this.show = false
    })
  }
}
</script>

<style lang="scss" scoped>

</style>